<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Logically structured HTML documents</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
      pre {
        font-weight: bold;
        color: #00008B;
        background-color: #D3D3D3;
      }
    </style>
  </head>
  <body>
    <h2>Logicially structured HTML documents</h2>
    <p>
      When designing a web page for accessibility, a web developer should structure their HTML in a logical format.  An html document should start with the most important elements and put less important information later in the file.  This is a fundamental principle of HTML since it defines how information is structured.  The presentation of that information should be left to the style sheet.  A person using a non-graphical web brower, such as a screen reader, or a browser that doesn't support Cascading Style Sheets (CSS), a mobile phone for example, will want to see the page content first rather than scroll past navigation links and advertisements.
    </p>
    <p>
      To facilitate non-graphical or non-CSS web browers, I placed the main content of each page that uses CSS for position control (the home and assignments pages) before the navigation bar in the HTML files.  The HTML excerpt below, from the home page, demonstates the order of information. 
    </p>
    <p>See the <a href="#screenshots">screenshots below</a> for the home page with and without CSS styling.</p>
    <pre>
      &lt;body&gt;
          &lt;div id="entire-page"&gt;
          &lt;div id="page-heading"&gt;
            &lt;h1&gt;Philippe Gambling's Homework1&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="nav-main-container"&gt;
            &lt;div id="main-content"&gt;
              &lt;p&gt;
                This page is my solution for &lt;a href="http://sce.uhcl.edu/moenc/csci4230fall08/index.html"&gt;
                CSCI/CINF 4230 Web Application Development&lt;/a&gt; Homework 1.  
                See the &lt;a href="http://dcm.uhcl.edu/moen/assignment1.html"&gt;assignment description&lt;/a&gt; for the homework requirements.
              &lt;/p&gt;
              &lt;p&gt;Please use the left pane to navigate the web site.&lt;/p&gt;
              &lt;ul&gt;
                &lt;li&gt;"Home" will return to this page.&lt;/li&gt;
                &lt;li&gt;"Longhorn Home" will load this page with University of Texas colors. (My undergraduate alma mater)&lt;/li&gt;
                &lt;li&gt;"Resume" is my current resume in XHTML 1.0.&lt;/li&gt;
                &lt;li&gt;"Assignments" is a list of my current class assignments and solutions.&lt;/li&gt;
                &lt;li&gt;"My Design" is a detailed discussion of the site's accessability and usability features.&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div id="nav-bar"&gt;
              &lt;h3&gt;Navigation&lt;/h3&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="index_longhorn.html"&gt;Longhorn Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="resume.html"&gt;Resume&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="assignments.html"&gt;Assignments&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="usability.html"&gt;My Design&lt;/a&gt;&lt;/li&gt;                    
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;p id="email"&gt;
            Send me an e-mail at &lt;a href="mailto:pgambling@gmail.com"&gt;pgambling@gmail.com&lt;/a&gt;
          &lt;/p&gt;
          &lt;p id="validation"&gt;
            &lt;a href="http://validator.w3.org/check?uri=referer"&gt;
              &lt;img src="http://www.w3.org/Icons/valid-xhtml10"
                   alt="Valid XHTML 1.0 Strict" height="31" width="88"/&gt;
            &lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/body&gt;
    </pre>
    <p id="screenshots">
      <img src="../images/index_css.jpg" alt="A screen capture of the home page with CSS styling."  style="border: solid" />
      <img src="../images/index_nocss.jpg" alt="A screen capture of the home page without CSS styling."  style="border: solid" />
    </p>
    <p>
      <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10"
             alt="Valid XHTML 1.0 Strict" height="31" width="88"/>
      </a>
    </p>
  </body>
</html>
